<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>市场管理</el-breadcrumb-item>
    <el-breadcrumb-item>市场列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="市场名称">
        <el-input v-model="mname" placeholder="请输入市场名称"></el-input>
      </el-form-item>

      <el-form-item label="是否开放">
        <el-select v-model="status" placeholder="状态">
          <el-option label="请选择" value=""></el-option>
          <el-option  label="开放" value="0"></el-option>
          <el-option  label="未开放" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="search()">查询</el-button>
      </el-form-item>

    </el-form>
  </div>

  <el-col :span="4">
    <el-button type="primary" @click="showAddStallDialog">添加市场</el-button>
  </el-col>

  <div>
    <el-table :data="marketList" border stripe>

      <el-table-column label="市场名称" prop="marketName" width="130px"></el-table-column>

      <el-table-column label="市场电话" prop="cellphone" width="130px"></el-table-column>
      <el-table-column label="市场管理员" prop="name" width="130px"></el-table-column>
      <el-table-column label="市场地址" prop="address" width="200px"></el-table-column>

      <el-table-column label="状态" width="130px">
        <template slot-scope="sc">{{sc.row.status==0?'开放':'未开放'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="showEditDialog(scope.row)">管理</el-button>
          <el-button type="warning" size="mini" @click="showStallByMarketId(scope.row.marketId)">明细</el-button>
          <el-button type="danger" size="mini" @click="removeMarketById(scope.row.marketId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
  </div>



  <!--    添加市场的信息-->
  <el-dialog width="50%" title="添加市场" :visible.sync="addMarketDialogFormVisible"  :close-on-click-modal="false" @close="cancelAddMarket">
    <el-form label-position="left" :model="addMarketForm" ref="addMarketRefForm" :rules="addMarketFormRules" label-width="80px">

      <el-form-item label="市场名称"  prop="marketName" label-width="80px">
        <el-input v-model="addMarketForm.marketName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="市场电话"  prop="cellphone" label-width="80px">
        <el-input v-model="addMarketForm.cellphone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="管理员" prop="managerId">
        <el-select v-model="addMarketForm.managerId" placeholder="管理员">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="m in managerList" :label="m.name" :value="m.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="市场地址"  prop="address" label-width="80px">
        <el-input v-model="addMarketForm.address" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="是否使用" prop="status" label-width="80px">
          <el-radio v-model="addMarketForm.status" label="0">开放</el-radio>
          <el-radio v-model="addMarketForm.status" label="1">未开放</el-radio>
      </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="cancelAddMarket">取 消</el-button>
      <el-button type="primary" @click.prevent="saveAddMarket">添 加</el-button>
    </div>
  </el-dialog>


  <!--    修改市场的信息-->
  <el-dialog width="50%" title="修改市场" :visible.sync="editMarketDialogFormVisible"  :close-on-click-modal="false" @close="cancelEditMarket">
    <el-form label-position="left" :model="editMarketForm" ref="editMarketRefForm" :rules="editMarketFormRules" label-width="80px">

      <el-form-item label="市场名称"  prop="marketName" label-width="80px">
        <el-input v-model="editMarketForm.marketName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="市场电话"  prop="cellphone" label-width="80px">
        <el-input v-model="editMarketForm.cellphone" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="管理员" prop="managerId">
        <el-select v-model="editMarketForm.managerId" placeholder="管理员">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="m in managerList" :label="m.name" :value="m.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="市场地址"  prop="address" label-width="80px">
        <el-input v-model="editMarketForm.address" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="是否使用" prop="status" label-width="80px">
        <el-radio v-model="editMarketForm.status" :label="0">开放</el-radio>
        <el-radio v-model="editMarketForm.status" :label="1">未开放</el-radio>
      </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="cancelEditMarket">取 消</el-button>
      <el-button type="primary" @click.prevent="saveEditMarket">修 改</el-button>
    </div>
  </el-dialog>



</div>
</template>

<script>
import Bus from "@/bus";

export default {
  name: "Market",
  data(){
    return{
      editMarketDialogFormVisible:false,
      addMarketDialogFormVisible:false,
      managerList:[],
      mname:'',
      status:"",
      pageNum:1,
      pageSize:3,
      total:0,
      marketList:[],
      addMarketForm:{
        marketName:'',
        cellphone:'',
        managerId:'',
        address:'',
        status:'',

      },
      editMarketForm:{
        marketName:'',
        cellphone:'',
        managerId:'',
        address:'',
        status:'',
      },
      addMarketFormRules:{
        marketName:[
          {required:true , message:'市场名称不能为空',trigger:'blur'}
        ],
        cellphone:[
          {required:true,message:'市场电话不能为空',trigger:'blur'},
          // {pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message:'必须符合邮箱格式',trigger:'blur'},
        ],
        managerId:[
          {required:true,message:'请选择市场管理员',trigger:['change' , "blur"]}
        ],
        status:[
          { required: true, message: '请选择市场状态', trigger: 'change' }
        ],
        address:[
          {required:true,message:'市场地址不能为空',trigger:'blur'}
        ],


      },
      editMarketFormRules:{
        marketName:[
          {required:true , message:'市场名称不能为空',trigger:'blur'}
        ],
        cellphone:[
          {required:true,message:'市场电话不能为空',trigger:'blur'},
          // {pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message:'必须符合邮箱格式',trigger:'blur'},
        ],
        managerId:[
          {required:true,message:'请选择市场管理员',trigger:['change' , "blur"]}
        ],
        status:[
          { required: true, message: '请选择市场状态', trigger: 'change' }
        ],
        address:[
          {required:true,message:'市场地址不能为空',trigger:'blur'}
        ],
      },

    }
  },
  methods:{
    /**
     * 关闭添加市场的模态框
     */
    cancelAddMarket(){
      this.addMarketDialogFormVisible=false;
      this.$refs.addMarketRefForm.resetFields(); //清空表单中的内容
    },
    cancelEditMarket(){
      this.editMarketDialogFormVisible=false;
      // this.$refs.editStallRefForm.resetFields(); //清空表单中的内容
      this.initMarket();
    },
    saveAddMarket(){
      this.$refs.addMarketRefForm.validate((valid)=>{
        if(valid){

          let url = "/market/add"
          // this.addStallForm.department.id = this.addStallForm.mid;
          let id = this.addMarketForm.managerId;
          console.log(id)
          console.log("addMarketForm vvvvv")
          console.log(this.addMarketForm)

          this.$axios.post(url,this.addMarketForm)
              .then(res=>{
                if(res.data.code == 200){
                  this.addMarketDialogFormVisible = false;
                  this.$refs.addMarketRefForm.resetFields(); //清空表单中的内容
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  })
                  this.initMarket();
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }else{
          return;
        }
      })
    },
    /**
     * 显示添加摊位的模态框
     */
    showAddStallDialog(){

      this.addMarketDialogFormVisible = true;
    },
    saveEditMarket(){
      this.$refs.editMarketRefForm.validate(valid=>{
        if(!valid){
          return;
        }else {
          //提交保存
          let url = '/market/modify';
          this.$axios.put(url , this.editMarketForm)
              .then(res=>{
                if(res.data.code == 200){
                  this.editMarketDialogFormVisible = false;
                  this.initMarket();
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  })
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }
      })


    },
    showEditDialog(obj){
      console.log('当前对象信息vvvvvvv');
      console.log(obj)
      this.editMarketDialogFormVisible = true;
      this.editMarketForm = obj;
    },

    handleCurrentChange(val){
      this.pageNum = val;
      this.initMarket();
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.pageNum = 1;
      this.initMarket();
    },
    /**
     * 搜索
     */
    search(){
      this.pageNum = 1;
      this.initMarket();

    },

    showStallByMarketId(id){
      window.sessionStorage.setItem("MarketId" , id);
      console.log("这是从市场列表传的MarketId"+id)
      this.$router.push({
        name: "marketDetail",
        path: "/marketDetail",
        params: {
          marketId:id
        }
      })


    },

    removeMarketById(id){
      console.log(id)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/market/del/'+id;
        this.$axios.put(url)
            .then(res=>{
              if(res.data.code == 200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.initMarket();
              }else{
                this.$message({
                  type:'error',
                  message:res.data.msg,
                  duration:1000
                })
              }

            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    initManager(){
      let url = "manager/getManager";
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              this.managerList = res.data.data;
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },

    initMarket(){
      let url = "market/marketList";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          marketName:this.mname,
          status:this.status,
        }
      }).then(res=>{
        console.log("================================")
        console.log(res)
        if(res.data.code == 200){
          this.marketList = res.data.data.list ;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum ;
          this.total = res.data.data.total ;
        }else {
          this.$message({
            type:'error',
            message:res.data.msg,
            duration:1000
          })
        }
      })
    }


  },
  created(){
    this.initMarket()
    this.initManager()
  }

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>

</style>